<!DOCTYPE HTML>
<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=windows-1251">
	<title>canvas</title>
	<script src="/js/event.js" type="text/javascript"></script>
	<script src="/js/json_parse.js" type="text/javascript"></script>
	<style>
		html,body {padding:0; margin:0; height:100%;}
	  #fb-root {position:absolute; }
	  #trace{
			padding:3px;
			border:1px solid silver;
			position:absolute;
			top:0;
			right:0;
			z-index:201;
			background:#fff;
		}
	  #toper{
	    position:relative;
	    z-index:200;
	    background:#3b5998;
			height:50px;
		}
	  #cont {
			padding:0;
			margin:0;
			clear:both;
		}
		#cont a{
			display: -moz-inline-stack;
			display: inline-block;
			vertical-align: top;
			zoom: 1;
			*display: inline;

		  height:50px;
		  width:50px;
		  padding:10px;
		  position:relative;
		}
		#cont a img{
		  max-height:50px;
		  max-width:50px;
		}
		#cont a:hover img{
		  border:1px solid #555;
    	position:absolute;
    	left:9px;
    	top:8px;
    	z-index:10;
		}
		#cont a:hover img.photo{
    	max-width:200px;
    	max-height:200px;
    	position:absolute;
    	z-index:10;
    	left:-50%;
    	top:-50%;
		}
		
		#loading {
		  background:url(/img/loading.gif) center center no-repeat #fff;
		  opacity:0.7;
		  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
		  filter: alpha(opacity=70);
		  position:fixed;
		  z-index:20;
		  top:0;
		  left:0;
		  width:100%;
		  height:100%;
		}
		#title{
		  list-style:none;
		  padding:0;
		  margin:10px 0 0 20px;
		}
		#title li {
		  float:left;
		  margin:0 20px 0 10px;
		}
		#title li a{
		  text-decoration:none;
		  font-family:"Comic Sans MS","Brush Script MT",cursive;
			color:#3B5998;
		}
		#title li a.active{
		  font-size:18px;
		  color:#000;
		}
	</style>
	</head>
	<body>
	  <div id="toper">
			<img src="/img/logo.jpg" style="margin:5px 0 0 10px;">
		</div>
		<div id="fb-root"></div>
		<div id="loading" style="display:none;"></div>
		<div id="trace"></div>
		<ul id="title">
			<li> <a class="active" href="#">	1. Chose your friend </a> </li>
		  <li> <a href="#">	2. Select photo </a> </li>
		  <li> <a href="#">	3. Draw your friend </a> </li>
		  <li> <a href="#">	4. Post to facebook </a> </li>
		</ul>
		<div id="cont"></div>
		<script>
		var fd_obj=false;
		var fd=function(){
		  this.friends_list=[];
		  this.friend_cur=false;
		  this.user_photos_page=0;
		  this.user_photos=[];
		  
		  //get access_token, friends list
			this.init=function(){
				FB.login(function(response) {
					if (response.authResponse) {
						fd_obj.friends_list_get();
						//fd_obj.user_photos( '100001022971933' );
					} else {
						trace('User cancelled login or did not fully authorize.');
					}
				}, {
					scope: 'friends_about_me,friends_photos'
				});
			}
			
			this.show=function(mode,ids){
			  switch(mode){
			    case 'friends':	break;
			    case 'photos':	break;
				}
			}

			//load friends list
			this.friends_list_get=function(){
			  if(this.friends_list.length>0){
					this.friends_show();
					return true;
				}
			  //this.friends_list=[];
				trace('loading your friends list...');
				
				FB.api('/me/friends', function(response) {
					var t='';
					if(typeof(response.data)=='undefined'){
					  trace('error loading friends list');
					}else{
						for(var i in response.data){
						  fd_obj.friends_list.push({
						    id:response.data[i].id,
						    name:response.data[i].name
							});
						}
						fd_obj.friends_show();
					}
				});
			}
			this.friends_show=function(){
			  trace('');
			  var t='';
				for(var i=0; i<this.friends_list.length; i++){
						t+=	'<a href="#" align="left" onclick="fd_obj.user_photos_get('+
								this.friends_list[i].id+
								'); return false;" title="'+
								this.friends_list[i].name+
								'">'+
								'<img src="http://graph.facebook.com/'+
								this.friends_list[i].id+
								'/picture" /></a>';
				}
				show('friends list', t);
				//this.resize_iface();
			}
			
			//Get user photos --- Batch_query, EBENAVROT!:)
			this.user_photos_get=function(uid){
				  if( typeof(this.user_photos[uid])!='undefined'  ){
						this.user_photos_show(uid);
						return true;
					}

					trace('loading users albums photos...');
					FB.api('/', 'POST', {batch:[
							{
								method: 'GET',
                name : 'falbums',
                //omit_response_on_success: false,
                relative_url: uid+'/albums?limit=2'
							},{
								method: 'GET',
                name : 'faphotos',
                omit_response_on_success: false,
                relative_url: 'photos?ids={result=falbums:$.data.*.id}'
							}
						]},
						function (response) {
						  var t='';
						  var tmp=json_parse(response[1].body, function (key, value) {
								var a;
								if (typeof value === 'string') {
									a =
									/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
									if (a) {
										return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
										+a[5], +a[6]));
									}
								}
								return value;
							});
							fd_obj.user_photos[uid]=new Array();
							for(var i in tmp)
								for(var j in tmp[i].data){
								  fd_obj.user_photos[uid].push({
								    id : tmp[i].data[j].id,
								    picture : tmp[i].data[j].picture,
								    source : tmp[i].data[j].source,
									});
							}
              fd_obj.user_photos_show(uid);
						}
					);
			}
			this.user_photos_show=function(uid){
			  trace('');
			  var t='';
			  
				for(var i=0; i<this.user_photos[uid].length; i++){
						t+=	'<a href="#" class="inline-block" onclick="fd_obj.photo_get(\'/'+
								this.user_photos[uid][i].id+
								'\'); return false;" title="'+
								this.user_photos[uid][i].id+
								'">'+
								'<img src="'+
									this.user_photos[uid][i].picture+
								'" class="photo"/></a>';
				}
				t+='<br><a href="#" onClick="fd_obj.friends_show(); return false;">Hmmm... choose other friend</a>';
				
				show('users albums photos', t);
			}
			
			this.photo_get=function(id){
				trace( 'loading photo...'+id );
				FB.api(id, function(response) {
					var t='';
					alert(response.source);
					if(typeof(response)=='undefined'){
					  trace('error loading friends list');
					}else{
					  //HERE WORK
					  trace( '' );
					  show('image','<img src="'+response.source+'">');
					}
				});
			}
			
			//get friend images
			this.frend_images=function(id){
			  trace('loading users photos...');
			  
				FB.api('/'+id+'/photos', function(response) {
					var t='', imgs=[];
					if(typeof(response.data)=='undefined'){
					  ttrace('ERROR get photos');
					}else{
							for(var i in response.data){
								t+=	'<img src="'+response.data[i].picture+
										'" title="'+
										response.data[i].picture+
										'">';
								imgs.push({
								  id:response.data[i].id,
								  name:response.data[i].name,
								  picture:response.data[i].picture,
								  picture:response.data[i].source
								});
							}
							t+='<br><a href="#" onClick="fd_obj.friends_show(); return false;">back</a>';
							show('users images',t);
							trace('');
					}
				});
			}
		}


		window.fbAsyncInit = function(){
			FB.init({
				appId      : '	431381243595855', // App ID
				//channelUrl : 'http://idiotcomms.net/facebook/channel.php', // Channel File
				status     : true, // check login status
				cookie     : true, // enable cookies to allow the server to access the session
				xfbml      : true  // parse XFBML
			});
			// Additional initialization code here
			fd_obj=new fd();
			fd_obj.init();
		};

		// Load the SDK Asynchronously
		(function(d){
			var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
			if (d.getElementById(id)) {return;}
			js = d.createElement('script'); js.id = id; js.async = true;
			js.src = "//connect.facebook.net/en_US/all.js";
			ref.parentNode.insertBefore(js, ref);
		}(document));
		   
		var trace_obj=false;
		function trace(str){
			if(!trace_obj) trace_obj=document.getElementById('trace');
			trace_obj.innerHTML=str;
			var t=document.getElementById('loading');
			t.style.display=(str=='')?'none':'block';
		}
		var cont_obj=false;
		function show(title,str){
			if(!cont_obj) cont_obj=document.getElementById('cont');
			cont_obj.innerHTML=str;
		}
		
		function print_r(aObj,offset) {
			if (typeof(aObj)!='object') return aObj;
			if (!offset) offset='';
			var out='';
			for (var i in aObj) {
				if (typeof(aObj[i])=='object') out+=offset+i+'\r\n'+print_r(aObj[i],offset+'  ');
				else if (typeof(aObj[i])=='function') out+=offset+i+' - function\r\n';
				else out+=offset+i+' - '+aObj[i]+'\r\n';
			}
			if (offset=='') return out;
		}
		
		
		</script>
	</body>
</html>
